<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
        绑定方法: 数组语法,class后面跟的是一个数组
            用法一: 直接通过{}绑定一个类
            <h2 :class="['active']">Hello World</h2>

            用法二: 也可以传入多个值
            <h2 :class="['active','line']">Hello World</h2>

            用法三: 和普通的类同时存在,并不冲突
            注: 会有title/active/line三个类
            <h2 class="title" :class="['active','line']">Hello World</h2>

            用法四: 如果过于复杂,可以放在一个methods或者computed中
            注: classes是一个计算属性
            <h2 class="title" :class="classes">Hello World</h2>
     -->
    <div id="app">
        <h2 class="title" :class="['active','isLine']">{{message}}</h2>
        <!-- 加引号解析为字符串,不加引号则会从data中取 -->
        <h2 class="title" :class="[isActive,isLine]">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '苏州大学',
                isActive: 'active',
                isLine: 'isLine'
            }
        })
    </script>
</body>
</html>